//
//  HeartRateCardView.swift
//  Kosspot
//
//  Created by 胡辉 on 2025/8/3.
//

import SwiftUI
import Charts

struct HeartRateCardView: View {
    
    private var samples: [HeartRateHour] = [
        .init(hour: 0..<2, bpm: 50..<120),
        .init(hour: 2..<4, bpm: 70..<90),
        .init(hour: 4..<6, bpm: 60..<75),
        .init(hour: 6..<8, bpm: 80..<110),
        .init(hour: 8..<10, bpm: 100..<160),
        .init(hour: 10..<12, bpm: 50..<100),
        .init(hour: 12..<14, bpm: 100..<120),
        .init(hour: 14..<16, bpm: 80..<90),
        .init(hour: 16..<18, bpm: 60..<90),
        .init(hour: 18..<20, bpm: 110..<140),
        .init(hour: 20..<22, bpm: 90..<150),
        .init(hour: 22..<24, bpm: 60..<80),
    ]

    @State private var selectedHour: Range<Int>?
    
    var body: some View {
        VStack(alignment: .leading, spacing: 0) {
            HStack(spacing: 0) {
                VStack(alignment: .leading, spacing: 0) {
                    HStack(spacing: 2) {
                        Image("heart_icon")
                            .frame(width: 18,height: 18)
                        Text("心率")
                            .font(.system(size: 16, weight: .medium))
                            .foregroundColor(.white)
                    }
                    if let selectedHour = selectedHour {
                        Text("\(String(format: "%02d:00", selectedHour.lowerBound)) ~ \(String(format: "%02d:00", selectedHour.upperBound))")
                            .font(.system(size: 12, weight: .regular))
                            .foregroundColor(Color(hex: "#B2B2B2"))
                            .padding(.top, 7)
                    }
                }
                Spacer()
                if let selectedHour = selectedHour {
                    HStack(alignment: .bottom, spacing: 2) {
                        Text("\(samples.first(where: { $0.hour == selectedHour })?.bpm.lowerBound ?? 0) ~ \(samples.first(where: { $0.hour == selectedHour })?.bpm.upperBound ?? 0)")
                            .font(.system(size: 20, weight: .bold))
                            .foregroundColor(.white)
                            .alignmentGuide(.bottom) { d in d[.bottom] }
                        Text("次/分")
                            .font(.system(size: 14, weight: .regular))
                            .foregroundColor(.white)
                            .alignmentGuide(.bottom) { d in d[.bottom] + 2 }
                        
                    }
                }
            }
            .padding(.horizontal, 24)
            .padding(.top, 18)
            
            ZStack(alignment: .bottom) {
                ZStack {
                    HStack(spacing: 0) {
                        VerticalDashedLine()
                                .frame(width: 1, height: 160)
                        Spacer()
                        VerticalDashedLine()
                                .frame(width: 1, height: 160)
                        Spacer()
                        VerticalDashedLine()
                                .frame(width: 1, height: 160)
                        Spacer()
                        VerticalDashedLine()
                                .frame(width: 1, height: 160)
                        Spacer()
                        VerticalDashedLine()
                                .frame(width: 1, height: 160)
                    }
                    .padding(.horizontal, 23)
                    .frame(height: 160)
                    HStack {
                        Chart(samples) { item in
                            RectangleMark(
                                x: .value("Hour", item.hour),
                                yStart: .value("BPM Start", item.bpm.lowerBound),
                                yEnd: .value("BPM End", item.bpm.upperBound),
                                width: 12
                            )
                            .foregroundStyle(item.hour == selectedHour ? mainColor : Color(hex: "#47A298"))
                            .cornerRadius(6)
                        }
                        .padding(.horizontal, 0)
                        .frame(height: 160)
                        .chartXAxis(.hidden)
                        .chartYAxis(.hidden)
                        .chartOverlay { proxy in
                            GeometryReader { geo in
                                GeometryReader { geometry in
                                            Rectangle().fill(.clear).contentShape(Rectangle())
                                                .gesture(
                                                    DragGesture(minimumDistance: 0)
                                                        .onChanged { value in
                                                            let x = value.location.x
                                                            if let hour: Int = proxy.value(atX: x) {
                                                                let hourRange = samples.first(where: { $0.hour.contains(hour) })?.hour
                                                                selectedHour = hourRange
                                                            }
                                                        }
                                                )
                                        }
                            }
                        }
                    }
                    .padding(.horizontal, 23 )
                }
                
                ZStack {
                    Color(hex: "#3F3F3F").opacity(0.5)
                        .frame(height: 180)
                        .cornerRadius(16, corners: .allCorners)
                    Text("暂无数据")
                        .font(.system(size: 16, weight: .regular))
                        .foregroundColor(Color(hex: "#CACACA"))
                }
                .opacity(samples.isEmpty ? 1 : 0)
            }
            .padding(.top, 12)
            .padding(.horizontal, 16)
            
            HStack {
                Text("00:00")
                    .font(.system(size: 12, weight: .regular))
                    .foregroundColor(Color(hex: "#C1C1C1"))
                    .frame(width: 46)
                Spacer()
                Text("06:00")
                    .font(.system(size: 12, weight: .regular))
                    .foregroundColor(Color(hex: "#C1C1C1"))
                    .frame(width: 46)
                Spacer()
                Text("12:00")
                    .font(.system(size: 12, weight: .regular))
                    .foregroundColor(Color(hex: "#C1C1C1"))
                    .frame(width: 46)
                Spacer()
                Text("18:00")
                    .font(.system(size: 12, weight: .regular))
                    .foregroundColor(Color(hex: "#C1C1C1"))
                    .frame(width: 46)
                Spacer()
                Text("24:00")
                    .font(.system(size: 12, weight: .regular))
                    .foregroundColor(Color(hex: "#C1C1C1"))
                    .frame(width: 46)
            }
            .padding(.horizontal, 16)
            .padding(.top, 8)
        }
    }
}

struct HeartRateHour: Identifiable {
    let id = UUID()
    let hour: Range<Int>
    let bpm: Range<Int>
}

struct VerticalDashedLine: View {
    var body: some View {
        GeometryReader { geometry in
            Path { path in
                let midX = geometry.size.width / 2
                path.move(to: CGPoint(x: midX, y: 0))
                path.addLine(to: CGPoint(x: midX, y: geometry.size.height))
            }
            .stroke(
                style: StrokeStyle(
                    lineWidth: 1,
                    lineCap: .round,
                    dash: [4, 4]
                )
            )
            .foregroundColor(Color(hex: "#F5F5F5")).opacity(0.3)
        }
    }
}

#Preview {
    HeartRateCardView()
}
